.tabbar {
	position: absolute;
	left: 0;
	top: 0;
	background-image: linear-gradient(to bottom, #29323c 0%, #485563 100%);
	width: 4rem;
	height: 100%;
	user-select: none;

	.avatarContainer {
		width: 100%;
		text-align: center;
		padding-top: 2.5rem;
		padding-bottom: 0.5rem;
		padding-inline: 0.25rem;

		* {
			cursor: pointer;
			-webkit-user-drag: none;
		}
	}

	.tabContainer {
		width: 100%;

		.tabDiv {
			width: 100%;
			text-align: center;
			cursor: pointer;
			padding-top: 20%;
			padding-bottom: 20%;
			transition: 300ms;

			&:hover {
				background-color: rgba(255, 255, 255, 0.3);
			}

			.tab {
				color: #eaeaea;
				font-size: 2rem;
				transition: 300ms;
			}

			&.selected .tab {
				color: #04befe;
			}
		}
	}
}
